<template>
  <div class="app-container">
    <list-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="通知标题" prop="noticeTitle">
            <el-input
                v-model="tableQueryParams.noticeTitle"
                placeholder="请输入通知标题"
                clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="通知内容" prop="noticeContent">
            <el-input
                v-model="tableQueryParams.noticeContent"
                placeholder="请输入通知内容"
                clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="rowHandel">
        <el-button type="primary" icon="el-icon-plus"
                   size="mini" @click="handleAdd">新增通知
        </el-button>
      </template>

      <template slot="table">
        <el-table @sort-change="handleSortChange" height="100%" v-loading="loading" :data="dataList">
          <el-table-column label="通知标题" align="center" prop="noticeTitle"/>
          <el-table-column label="通知内容" align="center" prop="noticeContent"/>
          <el-table-column label="作者" align="center" prop="publisher"/>
          <el-table-column width="400" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
<!--              <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-edit"-->
<!--                  @click="childBearingPeriodManager(scope.row)"-->
<!--              >生育期管理-->
<!--              </el-button>-->
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </list-page-container>

    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form v-if="open" :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item class="column-item" label="通知标题" prop="noticeTitle">
                <el-input
                    v-model="form.noticeTitle"
                    placeholder="请输入通知标题"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="通知内容" prop="noticeContent">
                <el-input
                    v-model="form.noticeContent"
                    placeholder="请输入通知内容"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="作者" prop="publisher">
                <el-input
                    v-model="form.publisher"
                    placeholder="请输入发布人姓名"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>

  </div>

</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {
  queryNoticeList,
  addNotice,
  updateNotice,
  delNotice,
  getNotice
} from "@/api/noticeAnnouncement";
import {HIDDEN_DANGER_WIDTH} from "@/constantData";

export default {
  name:'noticeAnnouncement',
  mixins: [listPageMixins],
  components: {
    ShowFileList,
  },
  data() {
    return {
      HIDDEN_DANGER_WIDTH,
      modelName: '通知',
      // 查询参数
      queryParams: {
        // 通知内容
        noticeContent: null,
        // 通知标题
        noticeTitle: null,
      },
      otherQueryParam: {
      },
      getListFun: queryNoticeList,
      addFun: addNotice,
      updateFun: updateNotice,
      getInfoFun: getNotice,
      deleteFun: delNotice,
      baseForm: {
        id: null,
        // 通知内容
        noticeContent: null,
        // 通知标题
        noticeTitle: null,
        //作者
        publisher: null,
      },
      rules: {
        noticeContent: [
          {required: true, message: "通知内容不能为空", trigger: "blur"}
        ],
        noticeTitle: [
          {required: true, message: "通知标题不能为空", trigger: "blur"}
        ],
        publisher: [
          {required: true, message: "作者不能为空", trigger: "blur"}
        ],
      },
    }
  },
  methods:{
    // childBearingPeriodManager(typesOfInsurance){
    //   let {insuranceTypeCode:insuranceType} = typesOfInsurance
    //   this.$router.push({path: '/system/childBearingPeriod', query: {insuranceType}})
    // }
  }
}
</script>

<style scoped>

</style>
